<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script>
        // Object.defineProperty
        // var obj  ={}
        // Object.defineProperty(obj, "key", {
        //   enumerable: false, // 不可枚举：通过for-in不能遍历到
        //   configurable: false, // 不可配置：不能通过delete obj.key 进行删除
        //   writable: false, // 不可写：值不能被修改
        //   value: "static"
        // })

        const obj = {}
        let v = 10
        Object.defineProperty(obj, 'x', {
                // get是再每次访问obj的x属性的时候就会执行，并且这个属性得到的值来自于get的返回值
                get() {
                    return v
                },
                // 每次要修改obj的x属性，就会调用set
                set(newValue) {
                    console.log('newValue：' + newValue)
                    v = newValue
                        // 每次set的时候都调用渲染DOM的方法，这样就实现了响应式
                    setAppContent()
                }
            })
            // 这个方法专门负责渲染DOM
        const setAppContent = () => {
            document.querySelector('#app').innerHTML = obj.x
        }
        setAppContent()
    </script>
</body>

</html>